<template>
  <div>
    <div class="display-flex align-items-center">
      <div class="title-cost">其他耗材成本</div>
      <div style="margin-left: 15px">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </div>
    </div>
    <el-table
      :cell-style="{ padding: this.tablePadding }"
      border
      @selection-change="handleSelectionChange"
      v-loading="loading"
      :data="list"
      height="146px"
      @cell-dblclick="dellDblclick"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="耗材名称" align="center" prop="otherMaterialName">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.otherMaterialNameEdit"
            size="small"
            v-model="scope.row.otherMaterialName"
            @keyup.enter.native="
              setNum(scope.$index, scope.row.id, scope.row, 'otherMaterialName')
            "
            @blur="
              setNum(scope.$index, scope.row.id, scope.row, 'otherMaterialName')
            "
          />
          <div v-else>
            {{ scope.row.otherMaterialName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="消耗量" align="center" prop="amount">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.amountEdit"
            size="small"
            v-model="scope.row.amount"
            @input="scope.row.amount = scope.row.amount.replace(/[^\d.]/g, '')"
            @keyup.enter.native="
              setNum(scope.$index, scope.row.id, scope.row, 'amount')
            "
            @blur="setNum(scope.$index, scope.row.id, scope.row, 'amount')"
          />
          <div class="column-width" v-else>
            {{ scope.row.amount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="materialPrice">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.materialPriceEdit"
            size="small"
            v-model="scope.row.materialPrice"
            @input="scope.row.materialPrice = scope.row.materialPrice.replace(/[^\d.]/g, '')"
            @keyup.enter.native="
              setNum(scope.$index, scope.row.id, scope.row, 'materialPrice')
            "
            @blur="
              setNum(scope.$index, scope.row.id, scope.row, 'materialPrice')
            "
          />
          <div v-else>
            {{ scope.row.materialPrice }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="money">
      </el-table-column>
      <el-table-column label="操作" align="center" prop="money">
        <template slot-scope="scope">
          <el-link
            icon="el-icon-delete"
            type="primary"
            @click="handleDelete(scope.row, scope.$index)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getTechnologyMaterialOtherCost,
  delTechnologyMaterialOtherCost,
} from "@/api/technology/cost";
export default {
  data() {
    return {
      open: false,
      loading: false,
      list: [],
      isDisabledSave: true,
      totalMoney: 0,
      rules: {
        otherMaterialName: [
          { required: true, message: "耗材名称不能为空", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "消耗量不能为空", trigger: "blur" },
        ],
        materialPrice: [
          { required: true, message: "单价不能为空", trigger: "blur" },
        ],
        money: [{ required: true, message: "金额不能为空", trigger: "blur" }],
      },
      form: {
        otherMaterialName: "",
        amount: "",
        materialPrice: "",
        money: "",
        isEdit: false,
        workingId: this.workingId,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 300,
      },
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      workingId: null,
      initId: 10000,
    };
  },
  methods: {
    handleDelete(row, index) {
      // 这里不通过重新请求接口，js判断删除，以达到保留有输入值情况
      this.list.splice(index, 1);
      this.$emit("otherChange");
    },
    handleAdd() {
      this.isDisabledSave = false;
      let obj = {
        otherMaterialName: "",
        amount: "",
        materialPrice: "",
        money: "",
        isEdit: true,
        workingId: this.workingId,
        otherMaterialNameEdit: false,
        amountEdit: false,
        materialPriceEdit: false,
      };
      // this.open = true;
      this.list.push(obj);
    },
    getList(workingId) {
      this.workingId = workingId;
      getTechnologyMaterialOtherCost({ workingId: this.workingId }).then(
        (response) => {
          let arr = response.rows;
          this.list = arr.map((item) => {
            return Object.assign(
              {
                isEdit: false,
                otherMaterialNameEdit: false,
                amountEdit: false,
                materialPriceEdit: false,
              },
              item
            );
          });
          this.loading = false;
        }
      );
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex; //拿到的索引赋值给row的index,在这个表格中能拿到row的里面都会包含index
      return "row-remarks"; //className(类名)
    },
    dellDblclick(row, column, cell, event) {
      // 这里通过上门这个方法自定义了一个index
      let prop = column.property + "Edit";
      this.list[row.index][prop] = true;
    },
    // 编辑
    setNum(index, id, row, prop) {
      this.list[index][prop + "Edit"] = false;
      if (row[prop] == "") {
        return;
      }
      if (prop !== "otherMaterialName") {
        this.list[index][prop] = parseFloat(row[prop]).toFixed(2);
      }
      this.list[index][prop + "Edit"] = false;
      if (this.list[index].materialPrice && this.list[index].amount) {
        //如果单价和消耗量都有，才计算金额
        this.list[index].money = this.getTotal(
          this.list[index].amount,
          parseFloat(row.materialPrice)
        );
        this.$emit("otherChange");
      }
    },
    getTotal(num, price) {
      return ((num * 100 * (price * 100)) / 10000).toFixed(2);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-cost {
  font-weight: bold;
  line-height: 45px;
}
.column-width {
  width: 100%;
  height: 100%;
}
</style>